<template>
  <div class="dataStructure-wrap">
    <el-drawer title="数据结构" :visible.sync="visible" @closed="handleClose" ref="drawerRef">
      <el-tree class="filter-tree" :props="defaultProps" :load="loadNode" lazy ref="treeRef" node-key="name">
        <div class="custom-tree-node" slot-scope="{ node, data }">
          <span class="name" :class="data.type">
            {{ node.label }}
          </span>
          <span class="icon copy"></span>
          <span class="icon bridge"></span>
          <span class="columnsType">{{ data.columnsType }}</span>
        </div>
      </el-tree>
    </el-drawer>
  </div>
</template>

<script>
import { props } from 'vue2-ace-editor'
import { mapActions, mapMutations, mapState } from 'vuex'
export default {
  name: 'dataStructure',
  props: {
    datasourceId: {
      default: '26'
    },
    engineId: {
      type: String,
      default: ''
    }
  },
  data () {
    return {
      projectId: +this.$route.params.projectId,
      visible: false,
      topoLoading: null,
      isloaded: false,
      defaultProps: {
        children: 'children',
        label: 'name',
        isLeaf: 'leaf'
      }
    }
  },
  created () { },
  mounted () {
    this.visible = true
    !this.isloaded &&
      this.$nextTick(() => {
        this.topoLoading = this.$loading({
          lock: true,
          target: this.$refs.drawerRef.$el.querySelector('.el-drawer__body')
        })
      })
  },
  methods: {
    ...mapActions({
      postApiDatabases: 'POST_API_DATABASES',
      getAllApiDatabases: 'GET_ALL_API_DATABASES',
      postApiTables: 'POST_API_TABLES',
      postApiColumns: 'POST_API_COLUMNS'
    }),
    loadNode (node, resolve) {
    
      if (node.level == 0) {
        this.getAllApiDatabases(this.projectId).then(res=>{
        console.log(res);
        this.isloaded = true
          this.topoLoading?.close()
          const { code, result } = res
          if (code === 100000) {
            const d = result.map(item => ({
              name: item.connectionName,
              type: 'connection',
              id:item.id
            }))
            return resolve(d)
          }
      })

      }


      if (node.level == 1) {
        const { data } = node
        this.postApiDatabases({
          datasourceId: data.id,
          engineId: this.engineId
        }).then(res => {
         
          const { code, result } = res
          if (code === 100000) {
            const d = result.map(item => ({
              name: item.database,
              type: 'database'
            }))
            return resolve(d)
          }
        })
      }
      if (node.level == 2) {
        const { data } = node
        this.postApiTables({
          datasourceId: this.datasourceId,
          databaseName: data.name,
          engineId: this.engineId
        }).then(res => {
          const { code, result } = res
          if (code === 100000) {
            const d = result.map(item => ({
              name: item.tableName,
              type: 'tables'
            }))
            return resolve(d)
          }
        })
      }
      if (node.level == 3) {
        const { data, parent } = node
        this.postApiColumns({
          databaseName: parent.data.name,
          datasourceId: this.datasourceId,
          tableName: data.name,
          engineId: this.engineId
        }).then(res => {
          const { code, result } = res
          if (code === 100000) {
            const d = result.map(item => ({
              name: item.field,
              columnsType: item.type,
              type: 'columns',
              leaf: true
            }))
            return resolve(d)
          }
        })
      }
    },
    handleClose () {
      this.$emit('close')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-tree {
  background-color: transparent;
}

.custom-tree-node {
  display: flex;
  align-items: center;

  .name {
    background-repeat: no-repeat;
    background-position: left center;
    padding-left: 18px;

    &.database {
      background-image: url('~@/assets/images/apiManage/databases.png');
    }

    &.tables {
      background-image: url('~@/assets/images/apiManage/tables.png');
    }

    &.columns {
      background-image: url('~@/assets/images/apiManage/columns.png');
    }
  }

  .icon {
    display: block;
    width: 12px;
    height: 12px;
    background-repeat: no-repeat;
    margin-left: 6px;

    &.copy {
      background-image: url('~@/assets/images/apiManage/copy.png');
    }

    &.bridge {
      background-image: url('~@/assets/images/apiManage/bridge.png');
      margin-right: 6px;
    }
  }
}
</style>
